<template >

  <div style="position:relative;">
    <div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="文档名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="文档科目">
          <el-select v-model="form.course" placeholder="请选择文档科目">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>

      </el-form>
    </div>
    <div style="margin-bottom: 20px">
    <span>
      {{file===null?"请上传文件":file.name}}
    </span>
    </div>
    <el-row>
      <div>
        <el-col span="2">
          <label class="file-select">
            <div class="select-button">
              <span v-if="value">Selected File: {{ value.name }}</span>
              <span v-else>Select File</span>
            </div>
            <input type="file" @change="handleFileChange($event)"/>
          </label>
        </el-col>
      </div>
    </el-row>
     <el-row style="margin-top: 80px">
       <el-button type="primary" @click="submit">提交</el-button>
     </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      file: null,
      form:{
        name:'',
        course:'',
        date1: '',
        date2: '',
      }
    }
  },
  methods: {
    handleFileChange(event) {
      // 同样触发一个 input 来配合 v-model 的使用
      this.file = event.target.files[0]
    },
    submit(){
      this.$message('提交成功');
    }
  }
}
</script>

<style scoped>
.file-select > .select-button {
  padding: 1rem;
  width: 100px;
  color: white;
  background-color: #2EA169;

  border-radius: .3rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  font-weight: bold;
}

/* Don't forget to hide the original file input! */
.file-select > input[type="file"] {
  display: none;
}
</style>
